<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-04 16:19:23
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2023-12-27 09:23:29
 * @FilePath: \smart-community\src\views\index\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="content">
    <div class="left">
      <leftLayout3Rows></leftLayout3Rows>
      <!-- <component :is="cpList.find(el=>el.name == config.layConfig.left.cpName).cp " :cps="config.layConfig.left.args"></component> -->
    </div>
    <div class="center">
      <component :is="cpList.find(el=>el.name == config.layConfig.center.cpName).cp " :cps="config.layConfig.left.args"></component>
    </div>
    <div class="right">
      <component :is="cpList.find(el=>el.name == config.layConfig.right.cpName).cp " :cps="config.layConfig.left.args"></component>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, createApp } from "vue";
import leftLayout3Rows from '@/components/leftLayout3Rows/index.vue'
import leftLayout2Rows from '@/components/leftLayout2Rows/index.vue'
import centerLayout1 from '@/components/centerLayout1/index.vue'
import rightLayout1 from '@/components/rightLayout1/index.vue'
import config from "@/config/config.js"
let config1 = reactive(config)
console.log(config);
const app = createApp({});
const cpList = reactive([
  {
    name:'leftLayout3Rows',
    cp:leftLayout3Rows
  },
  {
    name:'leftLayout2Rows',
    cp:leftLayout2Rows
  },
  {
    name:'centerLayout1',
    cp:centerLayout1
  },
  {
    name:'rightLayout1',
    cp:rightLayout1
  }
])

</script>

<style lang="scss" scoped>
.content{
  @include display(space-around,center,row);
  width: 100%;
  height: 100%;

  &>div{
    height: 100%;
    box-sizing: border-box;
    width: 0;

  }
  .left{
    flex-grow: 1.1;
    padding: 0 60px;
  }
  .center{
    flex-grow: 2;
    padding: 0 60px;
  }
  .right{
    flex-grow: 1.1;
    padding: 0 60px;
  }
}
</style>